<template>
  <div>
    <h1>数据分析</h1>
    <el-row>
      <el-col :lg="12" :xs="24"
        ><div class="grid-content ep-bg-purple">
          <div id="main" style="height: 300px"></div>
        </div>
      </el-col>
      <el-col :lg="12" :xs="24">
        <div class="grid-content ep-bg-purple">
          <my-pie :list="info.list"></my-pie>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { leaveGroup } from '../service/leaveService'
import MyPie from '@/components/MyPie.vue'

type EChartsOption = echarts.EChartsOption

let info = ref({
  list: []
})

onMounted(async () => {
  let res2 = await leaveGroup({
    key: 'type'
  })
  if (res2.data.code == 200) {
    info.value.list  = res2.data.data;
  }

  let res = await leaveGroup({
    key: 'username'
  })
  let dataX = []
  let dataY = []
  if (res.data.code == 200) {
    dataX = res.data.data.map((item: any) => item['_id'])
    dataY = res.data.data.map((item: any) => item.count)
  }

  var chartDom = document.getElementById('main')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption
  option = {
    title: {
      text: '2306班请假情况'
    },
    legend: {
      data: ['次数']
    },
    xAxis: {
      type: 'category',
      data: dataX
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '次数',
        color: '#a90000',
        barWidth: 10,
        data: dataY,
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)
})
</script>

<style></style>
